<template>
  <div class="pay" ref="warpper">
    <div>
      <div class="header-contant">
        <div class="title-box">
          <div class="left">
            <div class="title">{{info.title}}</div>
            <div class="name">
              <i class="iconfont icon-dizhi"></i>
              {{info.address}}
            </div>
          </div>
          <div class="right">
            <div class="item" @click="jumpClick(`/AddressFeek?id=${goFeekID}`)">
              <img :src="up" class="small-icon">
              <div class="text">报错</div>
            </div>
            <div class="item" @click="jumpClick('/Help')">
              <img :src="help" class="small-icon">
              <div class="text">帮助</div>
            </div>
          </div>
        </div>
        <div class="show-contant">
          <div class="number-contant">
            <div class="num">{{info.power}}W</div>
            <div class="power">可用功率</div>
          </div>
          <div class="img-contant">
            <img :src="showBgc" class="bgc-img">
            <img :src="cover" class="cover">
            <img :src="boo" class="boo">
            <img :src="middle" class="middle">

            <div class="number">{{ID}}</div>
            <div class="progress-contant">
              <div class="space"></div>
              <div class="line" :style="{'height':percent}"></div>
            </div>
          </div>
          <div class="status-contant">
            <Power :number="info.sign" :color="true"></Power>
            <div class="button-contant">{{info.status == 1 ?'空闲':'使用中'}}</div>
          </div>
        </div>
      </div>
      <div class="main-contant">
        <div class="main-box">
          <div class="main-header">选择充电计费方式</div>
          <div class="main-des">
            <img :src="warm" class="warm">
            电池充满或被断终止，充电剩余金额不予返还
          </div>
          <div class="title-box">
            <div class="title-item" @click="changeType('time')">
              <img :src="time" class="img-item">
              <div :class="mode == 'time'?'text-highLight':'text'">小时计费</div>
            </div>
            <div class="title-item" @click="changeType('power')">
              <img :src="power" class="img-item">
              <div :class="mode == 'power'?'text-highLight':'text'">功率收费</div>
            </div>
          </div>
          <div class="line-box">
            <div class="left" :style="mode== 'time'?'width:1.4rem;':'width:5.6rem'"></div>
            <div class="middle"></div>
            <div class="right"></div>
          </div>
          <div class="pay-contant">
            <div
              class="pay-item"
              v-for="(item,index) in listShow"
              :key="index"
              @click="chooseList(index)"
              v-show="mode == 'time'"
            >
              <img :src="gou" v-show="item.cheack">
              <div class="price">{{item.price}}元</div>
              <div :class="item.cheack?'text-highLight':'text'">{{item.time}}小时</div>
            </div>
            <div
              class="pay-item1"
              v-for="(item,index) in listShow"
              @click="chooseList(index)"
              v-show="mode == 'power'"
              :key="index+'-'"
            >
              <img :src="angular" v-show="item.cheack">
              <div :class="item.cheack?'text-highLight':'text'">
                {{item.time!= 0 ? item.time :'充满自停'}}
                <span
                  v-if="item.time!= 0"
                  :class="item.cheack?'text-highLight':'text'"
                >小时</span>
              </div>
            </div>
          </div>
          <div class="pay-des" v-show="mode == 'power'">
            <div class="header">
              <div class="left"></div>
              <div class="title">以上时长按实际充电功率计费标准</div>
              <div class="left"></div>
            </div>
            <div class="show-contant">
              <div class="show-item" v-for="(item,index) in showArr" :key="index">
                <div class="text">{{item.price}}元/小时</div>
                <div class="des">{{item.power}}w</div>
              </div>
            </div>
          </div>
          <div class="type-contant">
            <div class="title">支付方式</div>
            <div class="space-line"></div>
            <div class="pay-row" @click="changePayType('weChat')" v-if="mode == 'time'">
              <img :src="weChat" alt>
              <div class="text">微信支付</div>
              <div :class="payType == 'weChat'?'check-box':'check-box-circle'">
                <img :src="gou" v-show="payType == 'weChat'">
              </div>
            </div>
            <div class="pay-row" @click="changePayType('balance')">
              <img :src="blance">
              <div class="text">
                余额支付
                <span>{{userinfo.all_balance}}</span> 元
              </div>
              <div class="des" @click="jumpTo('Pack')">充值</div>
              <div :class="payType == 'balance'?'check-box':'check-box-circle'">
                <img :src="gou" v-show="payType == 'balance'">
              </div>
            </div>
          </div>
          <div class="start" @click="startChar()">开始充电</div>
        </div>
        <div class="des-contant">
          <div class="row">
            <div class="type">注意</div>
            <div class="type-des">大功率电瓶车按时收费可能会被拒充,建议使用按量收费凡因充电器引发的问题,造成的后果均由车主自行承担</div>
          </div>
          <div class="row">
            <div class="type">提示</div>
            <div class="type-des">如充电器功率过载、充电到达趁小时、充电器被拔等状况,均有可能导致电池不能充满,请自己根据实际状况予以判断</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import "index.less";
</style>

<script>
import { mapActions, mapGetters } from "vuex";
import Power from "../../components/power/index";
import BScroll from "better-scroll";
export default {
  name: "Pay",
  data() {
    return {
      showBgc: require("../../assets/Pay/lun.png"),
      middle: require("../../assets/Pay/midde.png"),
      boo: require("../../assets/Pay/boo.gif"),
      help: require("../../assets/Pay/help.png"),
      up: require("../../assets/Pay/up.png"),
      warm: require("../../assets/Pay/warning.png"),
      time: require("../../assets/Pay/time.png"),
      power: require("../../assets/Pay/power.png"),
      weChat: require("../../assets/Pay/wechat.png"),
      blance: require("../../assets/Pay/balance.png"),
      gou: require("../../assets/public/gou.png"),
      cover: require("../../assets/Pay/cover.png"),
      angular: require("../../assets/Pay/angular.png"),
      suc: require("../../assets/success.png"),
      listScroll: {},
      paySuc: false,
      // 后台
      info: {},
      // 展示的支付类型列表
      listShow: {},
      mode: "time",
      listIndex: 0, // 当前选择列表的index
      // 支付类型
      payType: "weChat",
      timeArr: [
        {
          time: 0
        },
        {
          time: 1
        },
        {
          time: 3
        },
        {
          time: 5
        },
        {
          time: 7
        },
        {
          time: 12
        }
      ],
      showArr: [
        {
          power: "1元 /小时",
          price: "0-100w"
        },
        {
          power: "1元 /小时",
          price: "0-100w"
        },
        {
          power: "1元 /小时",
          price: "0-100w"
        }
      ],
      userinfo: {}, // 用户信息
      goFeekID: ""
    };
  },
  created() {
    this.change(false);
    this.getInfo();
    this.getUser();
    this.goFeekID = this.$route.query.id;
  },
  methods: {
    ...mapActions("Home", ["change"]),
    jumpClick(path) {
      this.$router.push({
        path: path
      });
    },
    changeType(mode) {
      if (mode == "time") {
        if (this.info.time_status != 1) {
          this.$dialog.toast({
            mes: "模式未开启",
            timeout: 1500,
            icon: "error"
          });
          return;
        }
        this.mode = mode;
        this.listShow = this.info.time_rules;
        this.payType = "weChat";
      } else {
        if (this.info.power_status != 1) {
          this.$dialog.toast({
            mes: "模式未开启",
            timeout: 1500,
            icon: "error"
          });
          return;
        }
        this.mode = mode;
        this.listShow = this.timeArr;
        this.payType = "balance";
      }
      this.typeListInit();
      // this.listScroll.refresh();
    },
    typeListInit() {
      for (let i in this.listShow) {
        this.listShow[i].cheack = false;
      }
      this.listIndex = 0;
      this.chooseList(0);
    },
    chooseList(index) {
      this.listIndex = index;
      for (let i in this.listShow) {
        if (i == index) {
          this.listShow[i].cheack = true;
        } else {
          this.listShow[i].cheack = false;
        }
      }
      this.$forceUpdate();
    },
    changePayType(type) {
      this.payType = type;
    },
    // 获取插座的信息
    getInfo() {
      this.$dialog.loading.open("正在加载");
      const that = this;
      this.$http
        .get("/socket/Info", {
          params: {
            id: this.$route.query.id
          }
        })
        .then(res => {
          this.info = res.data.data;
          this.listShow = this.info.time_rules;
          this.showArr = this.info.power_rules;
          if (this.info.status != 1) {
            // 如果这个设备在使用中和故障中,跳转
            console.log(1);
            if (that.info.status == 2) {
              // 使用中
              that.$dialog.loading.open("已被使用,准备跳转");
            }
            if (that.info.status == 3) {
              // 使用中
              that.$dialog.loading.open("正在维护,准备跳转");
            }
            setTimeout(() => {
              this.$router.push("/");
            }, 4000);
          } else {
            this.chooseList(0);
            if (that.info.time_status == 0) {
              this.changeType("power");
            }
            // 更新滑块
            this.$nextTick(() => {
              this.initScroll();
              this.$dialog.loading.close();
            });
          }
        });
    },
    initScroll() {
      this.listScroll = new BScroll(this.$refs.warpper, {
        click: true
      });
    },
    startChar() {
      this.$dialog.loading.open("正在加载");
      let ruletype = 0;
      let paytype = 1;
      const check = this.listShow[this.listIndex];
      console.log(check);
      if (this.mode == "time") {
        ruletype = 1;
      } else {
        ruletype = 2;
      }

      if (this.payType == "weChat") {
        // 微信支付
        paytype = 2;
        this.$http
          .post("/order/Chargecreate", {
            deviceid: this.info.deviceid,
            s_code: this.info.s_code,
            ruletype: ruletype,
            time: check.time,
            price: check.price,
            paytype: paytype
          })
          .then(res => {
            if (res.data.errno == 0) {
              this.$dialog.toast({
                mes: "提交成功",
                timeout: 1500,
                icon: "success"
              });
              if (this.payType == "weChat") {
                window.location.href = res.data.data.wechat_url;
              }
            } else {
              this.$dialog.toast({
                mes: "提交失败",
                timeout: 1500,
                icon: "error"
              });
            }
            this.$dialog.loading.close();
          });
      } else {
        // 余额支付
        this.$http
          .post("/order/Balcreate", {
            deviceid: this.info.deviceid,
            s_code: this.info.s_code,
            ruletype: ruletype,
            time: check.time,
            price: check.price
          })
          .then(res => {
            if (res.data.errno == 0) {
              document.title = "充电";
              this.$dialog.toast({
                mes: "上电成功",
                timeout: 1500,
                icon: "success",
                callback: () => {
                  this.$router.push(`/sussess`);
                }
              });
            } else {
              this.$dialog.toast({
                mes: res.data.message,
                timeout: 1500,
                icon: "error"
              });
            }
            this.$dialog.loading.close();
          });
      }
    },
    jumpTo(path) {
      this.$router.push(`/${path}`);
    },
    // 更新用户信息
    getUser() {
      this.$http.get("/user/Info", {}).then(res => {
        if (res.data.errno == 0) {
          this.userinfo = res.data.data;
        } else {
          this.$router.push("/login");
        }
      });
    }
    /// 地图相关
  },
  components: {
    Power
  },
  computed: {
    ...mapGetters("PayType", ["getID"]),
    ...mapGetters("Person", ["getPersonInfo"]),
    ID() {
      let res = 0;
      if (this.info.s_code <= 9) {
        res = "0" + this.info.s_code;
      } else {
        res = this.info.s_code;
      }
      return res;
    },
    percent() {
      let res = this.info.power / this.info.maxpower;
      res = res * 100;
      res = res + "%";
      return res;
    }
  },
  mounted() {}
};
</script>
